<template>
  <view class="container">
    <!-- 回购信息 -->
    <view class="info-container">
      <view class="info-item">
        <text class="info-label">可回购件数量：</text>
        <text class="info-value">{{ availableQuantity }}包</text>
      </view>

      <view class="info-item">
        <text class="info-label">当前回购价格：</text>
        <text class="info-value price">{{ price }}元</text>
      </view>

      <!-- 申请回购和上传发票在同一行 -->
      <view class="input-item">
        <text class="input-label">申请回购</text>
        <view class="input-right">
          <text class="action-link" @click="showUploadInvoice">上传发票</text>
        </view>
      </view>
      <!-- 输入包数 - 与开票信息样式一致 -->
      <view class="input-item">
        <view class="input-right flex-row">
          <input class="quantity-input" type="number" v-model="quantity" placeholder="输入包数" />
          <text class="action-link" @click="showBankInfo">开票信息</text>
        </view>
      </view>
      <view class="input-item">
        <text class="input-label">收款账号</text>
        <view class="input-right">
          <text class="bank-account">{{ maskBankAccount(selectedAccount.bank_card) }}</text>
          <text class="bank-name">{{ selectedAccount.bank_name }}</text>
          <text class="action-link" @click="selectAccount">收款账号</text>
        </view>
      </view>
    </view>

    <!-- 发票预览区域 -->
    <view class="invoice-preview" v-if="invoiceImage">
      <view class="preview-header">
        <text class="preview-title">发票预览</text>
        <text class="preview-delete" @click="deleteInvoice">删除</text>
      </view>
      <image class="invoice-image" :src="invoiceImage" mode="aspectFit"></image>
    </view>

    <!-- 申请按钮 -->
    <button class="apply-btn" @click="applyBuyback">申请回购</button>

    <!-- 协议确认复选框 -->
    <view class="agreement-container">
      <view class="checkbox-wrapper" @click="toggleAgreement">
        <view class="checkbox" :class="checkboxClass">
          <text v-if="isAgreementChecked" class="checkmark">✓</text>
        </view>
        <text class="agreement-text">
          <text class="agreement-line">第三方公司将采购您的沐浴露</text>
          <text class="agreement-line">请阅读
            <text class="agreement-link" @click.stop="openAgreement">《采购协议》</text>
            勾选确认同意
          </text>
        </text>
      </view>
    </view>

    <!-- 回购记录标题 -->
    <view class="record-title">回购记录</view>

    <!-- 回购记录列表 -->
    <view class="record-container">
      <view class="record-header">
        <text class="record-header-item date">日期</text>
        <text class="record-header-item amount">回购金额</text>
        <text class="record-header-item status">是否转账</text>
        <text class="record-header-item action-top">操作</text>
      </view>

      <view v-if="records && records.length > 0" class="record-list">
        <view class="record-item" v-for="(item, index) in records" :key="index">
          <text class="record-item-cell date">{{ item.created_at }}</text>
          <text class="record-item-cell amount">¥ {{ item.amounts }}</text>
          <text class="record-item-cell status">{{ ['待审核', '转账中', '已转账', '已驳回'][item.status] }}</text>
          <text class="record-item-cell action" @click="viewDetail(item)">查看</text>
        </view>
      </view>
      <statusTips v-else></statusTips>
    </view>

    <!-- 协议弹窗 -->
    <uni-drawer :width="windowWidth" ref="agreementDrawerRef" mode="right" :mask-click="false">
      <uni-nav-bar @clickLeft="closeAgreement" left-icon="left" title="采购协议" />
      <scroll-view scroll-y="true" style="height: 95vh">
        <view class="agreement-drawer-content">
          <view class="agreement-title">采 购 合 同</view>
          
          <view class="contract-header">
            <view class="party-info">
              <text class="party-label">甲方：</text>
              <text class="party-name">江西柚惠科技有限公司</text>
            </view>
         
          </view>

          <view class="contract-header">
            <view class="party-info">
              <text class="party-label">签约人：</text>
              <text class="party-signer"></text>
            </view>
      
          </view>
          <view class="contract-header">
      
            <view class="party-info">
              <text class="party-label">乙方：</text>
              <text class="party-name"></text>
            </view>
          </view>

          <view class="contract-header">
     
            <view class="party-info">
              <text class="party-label">签约人：</text>
              <text class="party-signer"></text>
            </view>
          </view>

          <view class="contract-intro">
            甲、乙双方本着平等、互惠互利的原则，经友好协商，因甲方经营需要，就甲方向乙方采购立美传淇品牌沐浴露事宜达成如下协议：
          </view>

          <view class="contract-section">
            <view class="section-title">一、品名、单位、规格</view>
            <view class="section-content">
              甲方向乙方采购下表所列产品<br>
              立美传淇沐浴露：8ml/包，采购价1元/包<br>
              注：如采购价变化，则另行签定协议
            </view>
          </view>

          <view class="contract-section">
            <view class="section-title">二、采购数量</view>
            <view class="section-content">
              由甲方自行决定需要采购的数量
            </view>
          </view>

          <view class="contract-section">
            <view class="section-title">三、交付方式</view>
            <view class="section-content">
              1、乙方将存在的【换换猫】平台云仓的沐浴露，所有权转移给甲方在【换换猫】的账号上。甲方在2天内支付所转移权限部份的沐浴露全款。<br>
              2、甲方按【换换猫】平台的规则自行处置，如到【换换猫】全国合作商家提货点，自行提取沐浴露，或做其它处置。
            </view>
          </view>

          <view class="contract-section">
            <view class="section-title">四、交易保障</view>
            <view class="section-content">
              乙方应确保在【换换猫】云仓的沐浴露的真实性，以及确保甲方收到沐浴露的使用权后，可以在平台处理使用或提取到沐浴露。如因乙方原因，甲方不能正常处置沐浴露，甲方有权终止采购，并追讨所支付的货款。
            </view>
          </view>

          <view class="contract-section">
            <view class="section-title">五、发票开具</view>
            <view class="section-content">
              1、乙方应在【换换猫】后台提交回购申请时，提交对应货款的全额发票。<br>
              2、乙方需向甲方开具真实、合法、有效的发票，若因乙方提供的发票存在问题导致甲方遭受任何损失的，乙方应承担全部责任，并向甲方予以全额赔偿。
            </view>
          </view>

          <view class="contract-section">
            <view class="section-title">六、其它</view>
            <view class="section-content">
              1、本合同无固定期限，乙方在【换换猫】平台提交回购申请时，勾选同意框后视为协议生效。甲方一经确认采购，双方的交易行为遵守本协议约定，并负法律责任与义务。<br>
              2、甲方可要求乙方签定书面协议备案，乙方应予配合。无论是否签定书面协议，不影响本协议的生效与法律效力。<br>
              3、因本合同的执行发生任何争议，双方首先通过友好协商解决。协商不成的，在甲方所在地人民法院起诉。<br>
              4、本合同的如有附件视为合同不可分割的组成部分，与本合同具有同等法律效力。
            </view>
          </view>

          <view class="contract-footer">
            <view class="footer-row">
              <view class="footer-party">
                <text class="footer-label">甲方：</text>
                <text class="footer-line">________________</text>
              </view>
              <view class="footer-party">
                <text class="footer-label">乙方：</text>
                <text class="footer-line">________________</text>
              </view>
            </view>
            <view class="footer-row">
              <view class="footer-party">
                <text class="footer-label">签约人：</text>
                <text class="footer-line">________________</text>
              </view>
              <view class="footer-party">
                <text class="footer-label">签约人：</text>
                <text class="footer-line">________________</text>
              </view>
            </view>
            <view class="footer-row">
              <view class="footer-party">
                <text class="footer-label">签约时间：2025年</text>
                <text class="footer-line">___</text>
                <text class="footer-label">月</text>
                <text class="footer-line">___</text>
                <text class="footer-label">日</text>
              </view>
              <view class="footer-party">
                <text class="footer-label">签约时间：</text>
                <text class="footer-line">________________</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </uni-drawer>

    <!-- 银行信息弹窗 -->
    <uni-popup ref="bankInfoPopup" type="center">
      <view class="popup-content">
        <view class="popup-title">开票信息</view>

        <view class="bank-info-item">
          <text class="bank-info-label">[名称]</text>
          <text class="bank-info-value">江西柚惠科技有限公司</text>
        </view>

        <view class="bank-info-item">
          <text class="bank-info-label">[纳税人识别号]</text>
          <text class="bank-info-value">91360702MA7C7UWG57</text>
        </view>

        <view class="bank-info-item">
          <text class="bank-info-label">[开户银行]</text>
          <text class="bank-info-value">中国工商银行股份有限公司赣州杨公路支行</text>
        </view>

        <view class="bank-info-item">
          <text class="bank-info-label">[账号]</text>
          <text class="bank-info-value">1510221709000067620</text>
        </view>

        <view class="bank-info-item">
          <text class="bank-info-label">[地址]</text>
          <text class="bank-info-value">江西省赣州市章贡区长征大道京华苑1栋3#写字楼2楼</text>
        </view>

        <view class="bank-info-item">
          <text class="bank-info-label">[电话]</text>
          <text class="bank-info-value">13970782269</text>
        </view>

        <view class="bank-info-item">
          <text class="bank-info-label">[邮箱]</text>
          <text class="bank-info-value">228229330@qq.com</text>
        </view>

        <button class="copy-btn" @click="copyBankInfo">复制文本</button>
      </view>
    </uni-popup>

    <!-- 上传发票弹窗 -->
    <uni-popup ref="uploadPopup" type="center">
      <view class="upload-popup">
        <view class="upload-title">上传发票</view>
        <view class="upload-options">
          <view class="upload-option" @click="chooseImage('album')">
            <text class="upload-icon">&#xe60d;</text>
            <text class="upload-text">从相册选择</text>
          </view>
          <view class="upload-option" @click="chooseImage('camera')">
            <text class="upload-icon">&#xe65f;</text>
            <text class="upload-text">拍照</text>
          </view>
        </view>
        <button class="cancel-btn" @click="closeUploadPopup">取消</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
// import uni from '@dcloudio/uni-app';
import { getWithdrawList, showBankCard, withdraw, uploadInvoiceImg } from '@/api/bgame';
import statusTips from '@/components/statusTips/statusTips.vue';
import defaultConfig from '@/config';

// 窗口宽度
const windowWidth = ref(0);

// 设置抽屉宽度
const setDrawerWidth = () => {
  let info = uni.getSystemInfoSync();
  windowWidth.value = info.windowWidth;
};

// 初始化窗口宽度
setDrawerWidth();

// 回购信息
const availableQuantity = ref(30);
const price = ref('1.00');
const quantity = ref('');

// 选中的账号
const selectedAccount = computed(() => {
  return uni.getStorageSync('selectedAccount') || {};
});

const getAccount = async () => {
  const res: any = await showBankCard({});
  console.log('res', res);
  if (1 == res.result) {
    uni.setStorageSync('selectedAccount', res.data || '');
  }
};
// ref({
//   number: '6225 **** **** 9879',
//   bank: '中国建设银行',
// });

const maskBankCardNumber = (cardNumber: any) => {
  if (cardNumber.includes('*')) {
    return cardNumber;
  }
  // 检查银行卡号长度是否为16位或19位（常见的银行卡号长度）
  if (cardNumber.length !== 16 && cardNumber.length !== 19) {
    console.log('银行卡号长度不正确');
    return '';
  }

  // 获取前4位和后4位
  const first4Digits = cardNumber.slice(0, 6);
  const last4Digits = cardNumber.slice(-4);

  // 生成中间部分的掩码
  // const middleMask = '&zwnj;****&zwnj; '.repeat(Math.floor((cardNumber.length - 8) / 4)).trimEnd();
  const middleMask = ' **** **** ';

  // 拼接成最终的掩码后的银行卡号
  return first4Digits + middleMask + last4Digits;
};
// 回购记录
const records = ref([]);

// 弹窗引用
const bankInfoPopup = ref(null);
const uploadPopup = ref(null);
const agreementDrawerRef = ref(null); // 协议弹窗引用

// 发票图片
const invoiceImage = ref('');
const invoiceBase64 = ref(''); // 存储Base64数据
const invoiceFile = ref(null); // 存储文件引用
//类型
const consume_type = ref('');
// 协议确认
const isAgreementChecked = ref(false);

// 页面加载
onLoad((option) => {
  consume_type.value = option.type || 0;
  // 获取回购信息
  getBuybackInfo(option);
});
onShow(() => {
  // 获取回购记录
  getBuybackRecords();
  getAccount();
});
const typeObj = {
  1: 'A',
  2: 'B',
  3: 'C',
  4: 'D',
  5: 'E',
};

// 获取回购信息
const getBuybackInfo = (option) => {
  // 模拟API请求
  // 实际应该从服务器获取数据
  availableQuantity.value = option.num || 0;
};

// 获取回购记录
const getBuybackRecords = async () => {
  uni.showLoading({
    title: '获取数据...',
  });
  const res: any = await getWithdrawList({});
  uni.hideLoading();
  if (1 == res.result) {
    // uni.showToast({
    //   title: '获取数据成功',
    //   icon: 'success',
    // });
    records.value = res.data.data.data || [];
  } else {
    uni.showToast({
      title: res.msg.msg || '获取失败',
      mask: true,
      icon: 'error',
    });
  }
};

// 协议确认
const toggleAgreement = () => {
  isAgreementChecked.value = !isAgreementChecked.value;
};

// 打开协议弹窗
const openAgreement = () => {
  // 勾选复选框
  isAgreementChecked.value = true;
  agreementDrawerRef.value.open();
};

// 关闭协议弹窗
const closeAgreement = () => {
  agreementDrawerRef.value.close();
};

// 协议弹窗的class
const checkboxClass = computed(() => {
  return {
    'checked': isAgreementChecked.value,
  };
});

// 银行账号脱敏处理
const maskBankAccount = (account: any) => {
  if (!account) return '';
  return maskBankCardNumber(account);
};

// 选择账号
const selectAccount = () => {
  uni.navigateTo({
    url: '/pages/dog/account/add-account',
  });
};

// 显示银行信息
const showBankInfo = () => {
  bankInfoPopup.value.open();
};

// 复制银行信息
const copyBankInfo = () => {
  const bankInfo = `
名称: 江西柚惠科技有限公司
纳税人识别号: 91360702MA7C7UWG57
开户银行: 中国工商银行股份有限公司赣州杨公路支行
账号: 1510221709000067620
地址: 江西省赣州市章贡区长征大道京华苑1栋3
电话: 13970782269
邮箱: 228229330@qq.com
  `.trim();

  uni.setClipboardData({
    data: bankInfo,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
      });
      bankInfoPopup.value.close();
    },
  });
};

// 显示上传发票弹窗
const showUploadInvoice = () => {
  uploadPopup.value.open();
};

// 关闭上传发票弹窗
const closeUploadPopup = () => {
  uploadPopup.value.close();
};

// 选择图片
const chooseImage = (sourceType) => {
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: sourceType === 'camera' ? ['camera'] : ['album'], // 从相册选择或拍照
    success: (res) => {
      // 关闭弹窗
      closeUploadPopup();

      // 获取临时路径
      const tempFilePath = res.tempFilePaths[0];

      // 设置预览图片
      invoiceImage.value = tempFilePath;

      // 获取临时路径和文件引用
      invoiceFile.value = {
        path: tempFilePath,
        size: res.tempFiles[0].size,
        name: tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1),
      };

      upPhpFile();
      // // 将图片转为Base64
      // uni.getFileSystemManager().readFile({
      //   filePath: tempFilePath,
      //   encoding: 'base64',
      //   success: (res) => {
      //     // 存储Base64数据
      //     invoiceBase64.value = res.data;
      //     console.log('图片转Base64成功，长度:', invoiceBase64.value.length);

      //     uni.hideLoading();
      //     uni.showToast({
      //       title: '发票上传成功',
      //       icon: 'success',
      //     });
      //   },
      //   fail: (err) => {
      //     console.error('图片转Base64失败:', err);
      //     uni.hideLoading();
      //     uni.showToast({
      //       title: '图片处理失败',
      //       icon: 'none',
      //     });
      //   },
      // });
    },
  });
};

const upPhpFile = async () => {
  if (!invoiceFile.value.name || !invoiceFile.value.path) {
    uni.showToast({
      title: '图片异常',
      icon: 'none',
    });
    return;
  }
  // 显示加载中
  uni.showLoading({
    title: '上传中...',
  });
  let apiurl = 'plugin.breed-game.frontend.breedWithdraw.uploadInvoiceImg';
  let httpurl = `${defaultConfig.apiHost}?i=1&route=${apiurl}`;
  uni.uploadFile({
    url: httpurl, // 替换为你的服务器上传接口地址
    filePath: invoiceFile.value.path, // 要上传的图片的本地路径
    name: 'image', // 服务器接收文件的参数名，需要与服务器保持一致
    formData: {
      name: invoiceFile.value.name,
    },
    header: {
      'Content-Type': 'multipart/form-data', // 设置请求头，这里通常是multipart/form-data
      'X-Requested-With': 'XMLHttpRequest', // 有些服务器可能需要这个请求头
    },
    success: function (uploadFileRes: any) {
      // 上传成功的回调，uploadFileRes.data包含了服务器返回的数据
      const resData = JSON.parse(uploadFileRes.data);
      // 在这里处理服务器返回的数据，例如保存图片的URL等
      console.log('上传成功：', uploadFileRes.data, resData);

      if (1 == resData.result) {
        uni.showToast({
          title: '上传成功',
          icon: 'success',
        });
        Object.assign(invoiceFile.value, { invoice_img: resData.data.invoice_img });
      } else {
        uni.showToast({
          title: resData.msg.msg || '上传失败',
          mask: true,
          icon: 'error',
        });
      }
      uni.hideLoading();
    },
    fail: function (err: any) {
      uni.hideLoading();
      // 上传失败的回调
      console.error('上传图片失败：', err);
    },
  });
  // const res: any = await uploadInvoiceImg({
  //   name: invoiceFile.value.name,
  //   tmp_name: invoiceFile.value.path,
  // });
};
// 删除发票
const deleteInvoice = () => {
  uni.showModal({
    title: '提示',
    content: '确定要删除已上传的发票吗？',
    success: (res) => {
      if (res.confirm) {
        invoiceImage.value = '';
        invoiceFile.value = null;
        uni.showToast({
          title: '已删除',
          icon: 'success',
        });
      }
    },
  });
};

// 申请回购
const applyBuyback = async () => {
  if (!quantity.value) {
    uni.showToast({
      title: '请输入回购数量',
      icon: 'none',
    });
    return;
  }

  // 数量验证
  const qty = parseInt(quantity.value);
  if (isNaN(qty) || qty <= 0) {
    uni.showToast({
      title: '请输入有效的回购数量',
      icon: 'none',
    });
    return;
  }

  if (qty > availableQuantity.value) {
    uni.showToast({
      title: '回购数量不能超过可回购数量',
      icon: 'none',
    });
    return;
  }

  // 验证是否选择了发票
  if (!invoiceFile.value) {
    uni.showToast({
      title: '请上传发票',
      icon: 'none',
    });
    return;
  }

  // 验证协议确认
  if (!isAgreementChecked.value) {
    uni.showToast({
      title: '请阅读并同意《采购协议》',
      icon: 'none',
    });
    return;
  }

  // 提交申请
  uni.showLoading({
    title: '提交中...',
  });

  // // 构建请求数据
  // const requestData = {
  //   quantity: qty,
  //   accountId: selectedAccount.value.id,
  //   invoiceBase64: invoiceBase64.value,
  // };

  // 模拟API请求
  // console.log('发送到后端的数据:', requestData);

  const res = await withdraw({
    withdraw_money: qty,
    consume_type: consume_type.value,
    invoice_img: invoiceFile.value.invoice_img,
  });

  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '申请成功',
      icon: 'success',
    });

    // 重新获取数据
    getBuybackInfo({ num: availableQuantity.value - qty });
    getBuybackRecords();

    // 清空输入和图片
    quantity.value = '';
    invoiceImage.value = '';
    invoiceFile.value = null;
  } else {
    uni.showToast({
      title: res.msg.msg || '回购失败',
      mask: true,
      icon: 'error',
    });
  }
};

// 查看详情
const viewDetail = (item) => {
  uni.navigateTo({
    url: `/pages/dog/buyback/detail?id=${item.id}&status=${item.status}`,
  });
};
</script>

<style>
.flex-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background-color: #00a046;
  color: #fff;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
}

.header-icons {
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 15px;
}

.header-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-container {
  background-color: #fff;
  padding: 0 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.info-label {
  color: #333;
  font-size: 14px;
}

.info-value {
  color: #333;
  font-size: 14px;
}

.price {
  color: #00a046;
  font-weight: 500;
}

.input-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.input-label {
  color: #333;
  font-size: 14px;
}

.input-right {
  display: flex;
  align-items: center;
}

.quantity-input {
  width: 120px;
  text-align: left;
  margin-right: 10px;
  font-size: 14px;
}

.action-link {
  color: #00a046;
  font-size: 14px;
}

.bank-account {
  margin-right: 10px;
  font-size: 14px;
}

.bank-name {
  color: #666;
  font-size: 12px;
  margin-right: 10px;
}

/* 发票预览样式 */
.invoice-preview {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.preview-title {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.preview-delete {
  font-size: 14px;
  color: #ff6b00;
}

.invoice-image {
  width: 100%;
  height: 200px;
  background-color: #f9f9f9;
}

.apply-btn {
  margin: 20px 15px 0 15px ;
  background-color: #00a046;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
}

.agreement-container {
  display: flex;
  align-items: center;
  margin: 10px 15px; /* 减少上下边距 */
  padding: 8px 15px; /* 减少内边距 */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-right: 15px; /* 调整右边距 */
}

.checkbox {
  width: 18px; /* 稍微减小复选框大小 */
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-right: 20px; /* 添加复选框与文字的间距 */
  margin-left: 30px;
}

.checkbox.checked {
  border-color: #00a046;
  background-color: #00a046;
}

.checkmark {
  color: #fff;
  font-size: 14px;
}

.agreement-text {
  font-size: 13px; /* 稍微减小字体 */
  color: #333;
  flex: 1;
  text-align: center; /* 文本居中 */
}

.agreement-line {
  display: block; /* 确保文本换行 */
  line-height: 1.3; /* 减少行高 */
  margin-bottom: 1px; /* 减少行间距 */
  text-align: center; /* 每行文本居中 */
}

.agreement-link {
  color: #00a046;
  text-decoration: underline;
}

.record-title {
  padding: 15px;
  font-size: 14px;
  color: #666;
}

.record-container {
  background-color: #fff;
  margin-bottom: 20px;
}

.record-header {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  background-color: #f9f9f9;
}

.record-header-item {
  font-size: 12px;
  color: #666;
}

.record-item {
  display: flex;
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}

.record-item-cell {
  font-size: 12px;
  color: #333;
}

.date {
  flex: 2;
}

.amount {
  flex: 1;
  text-align: center;
}

.status {
  flex: 1;
  text-align: center;
}

.action-top {
  flex: 1;
  text-align: center;
}
.action {
  flex: 1;
  text-align: center;
  color: #00a046;
}

.popup-content {
  width: 290px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.popup-title {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.bank-info-item {
  margin-bottom: 10px;
}

.bank-info-label {
  color: #666;
  font-size: 12px;
}

.bank-info-value {
  color: #333;
  font-size: 14px;
  word-break: break-all;
}

.copy-btn {
  margin-top: 15px;
  background-color: #00a046;
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
  height: 40px;
  line-height: 40px;
}

/* 上传发票弹窗样式 */
.upload-popup {
  width: 280px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.upload-title {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.upload-options {
  display: flex;
  padding: 20px 0;
}

.upload-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  font-size: 30px;
  color: #00a046;
  margin-bottom: 10px;
}

.upload-text {
  font-size: 14px;
  color: #333;
}

.cancel-btn {
  border-top: 1px solid #eee;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  color: #333;
  background-color: #fff;
}

/* 协议弹窗样式 */
.agreement-drawer-content {
  padding: 20px;
}

.agreement-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.contract-header {
  display: flex;
  justify-content: space-between;
}

.party-info {
  display: flex;
  align-items: center;
}

.party-label {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}

.party-name {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.party-signer {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.contract-intro {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  text-indent: 2em; /* 首行缩进 */
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.contract-section {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #00a046;
  margin-bottom: 10px;
}

.section-content {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  text-indent: 2em; /* 首行缩进 */
}

.contract-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.footer-party {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* 防止换行 */
  white-space: nowrap; /* 防止文本换行 */
}

.footer-label {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}

.footer-line {
  font-size: 14px;
  color: #333;
  flex: 1;
  text-align: center;
  padding-bottom: 2px;
}
</style>
